<template>
	<div class="full_reduce">
		<x-header @on-click-back="forward" title="满减" :left-options="{backText: '',preventGoBack:true}">
		</x-header>
		<div class="content">
			<div class="sel_dates">
				<div class="sel_start_date">
					<group>
						<datetime v-model="value1" title="起始日期" placeholder="" @on-cancel="log1" @on-confirm="onConfirm1"></datetime>
					</group>
				</div>
				<div class="sel_end_date">
					<group>
						<datetime v-model="value2" title="结束日期" placeholder="" @on-cancel="log2" @on-confirm="onConfirm2"></datetime>
					</group>
				</div>
			</div>
			<div class="full_reduce_act">
				<div class="change_data" v-for="(item,index) in allData" :key="index">
					<p>{{ index+1 }}.</p>
					<div class="modify" v-if="index===0">
						<p>
							<span>满</span><input type="text" v-model.trim="input1" />
							<span>减</span><input type="text" v-model.trim="input2" />
						</p>
						<img v-if="index>0" @click="dels" src="../../assets/images/activity/del_full.jpg" alt="" />
					</div>
					<div class="modify" v-if="index===1">
						<p>
							<span>满</span><input type="text" v-model.trim="input3" />
							<span>减</span><input type="text" v-model.trim="input4" />
						</p>
						<img v-if="index>0" @click="dels" src="../../assets/images/activity/del_full.jpg" alt="" />
					</div>
					<div class="modify" v-if="index===2">
						<p>
							<span>满</span><input type="text" v-model.trim="input5" />
							<span>减</span><input type="text" v-model.trim="input6" />
						</p>
						<img v-if="index>0" @click="dels" src="../../assets/images/activity/del_full.jpg" alt="" />
					</div>
					<div class="modify" v-if="index===3">
						<p>
							<span>满</span><input type="text" v-model.trim="input7" />
							<span>减</span><input type="text" v-model.trim="input8" />
						</p>
						<img v-if="index>0" @click="dels" src="../../assets/images/activity/del_full.jpg" alt="" />
					</div>
					<div class="modify" v-if="index===4">
						<p>
							<span>满</span><input type="text" v-model.trim="input9" />
							<span>减</span><input type="text" v-model.trim="input10" />
						</p>
						<img v-if="index>0" @click="dels" src="../../assets/images/activity/del_full.jpg" alt="" />
					</div>
				</div>
				<div v-if="allData.length<5" class="add_full" @click="adds">新增阶梯配置</div>
				<div v-else class="maximum">同一活动最多添加5个满减阶梯配置</div>
			</div>
			<div class="agreement">
				<p>已阅读并同意<span @click="goProtocol">《商家自营销协议》</span>
					<x-switch title="" v-model="isSwitch"></x-switch>
				</p>
			</div>
		</div>
		<footer>
			<x-button v-if="isSwitch" style="background:#02c1af;color:#fff;" @click.native="ensureSave">确认并保存</x-button>
			<x-button v-if="!isSwitch" style="background:#cbd2d8;color:#fff;">确认并保存</x-button>
		</footer>
		<alert v-model="show1" title="提示" @on-show="onShow" @on-hide="onHide">{{ alert_title }}</alert>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import { XHeader, Tab, TabItem, Datetime, Group, Alert, XInput, XSwitch, XButton } from 'vux';
	import { getUrlParam }  from '@/assets/js/getUrlParam'
	export default {
		name: 'full_reduce',
		data() {
			return {
				value1: '', //起始时间
				value2: '', //结束时间
				show1: false,
				alert_title: '',
				input1: '', //满
				input2: '', //减
				input3: '', //满
				input4: '', //减
				input5: '', //满
				input6: '', //减
				input7: '', //满
				input8: '', //减
				input9: '', //满
				input10: '', //减
				allData: [1],
				isSwitch: true, //是否同意协议
				flagss: true, //防止重复提交
				params: '',
			}
		},
		components: {
			XHeader,
			Tab,
			TabItem,
			Datetime,
			Group,
			Alert,
			XInput,
			XSwitch,
			XButton
		},
		computed: {

		},
		created() {
			if(getUrlParam('user_product_id')){
	        	setCookie('user_product_id',getUrlParam('user_product_id'))
	        }else{
	        	setCookie('user_product_id','')
	        }
	      	if(getUrlParam('uid')){
	        	setCookie('uid',getUrlParam('uid'))
	        }else{
	        	setCookie('uid','')
	        }
	        if(getUrlParam('token')){
	        	setCookie('token',getUrlParam('token'))
	        }else{
	        	setCookie('token','')
	        }
			this.params = '?user_product_id='+getCookie('user_product_id')+'&uid='+getCookie('uid')+'&token='+getCookie('token');
			
			let dd = new Date();
			this.value1 = this.formats(dd.getTime());
		},
		methods: {
			//返回
			forward() {
				let self = this;
				this.$vux.confirm.show({
					content: '是否退出编辑活动',
					confirmText: '确认',
					onConfirm() {
						self.$router.go(-1);
					}
				})
			},
			onConfirm1(val) {
				this.value1 = val;
			},
			log1() {

			},
			onConfirm2(val) {
				if(!this.value1) {
					this.show1 = true;
					this.alert_title = '请先选择起始日期';
					this.value1 = this.value2 = '';
				}
				this.value2 = val;
				//计算相差天数
				let s1 = this.value1;
				let s2 = this.value2;
				s1 = new Date(s1.replace(/-/g, "/"));
				s2 = new Date(s2.replace(/-/g, "/"));
				let days = s2.getTime() - s1.getTime();
				if(days <= 0) {
					this.show1 = true;
					this.alert_title = '结束日期不能小于起始日期';
					this.value2 = '';
				}
			},
			log2() {

			},
			onShow() {

			},
			onHide() {

			},
			//删除
			dels() {
				this.allData.pop();
			},
			//增加
			adds() {
				this.allData.push(1);
			},
			//协议
			goProtocol() {
				this.$router.push('/protocol');
			},
			//日期格式化
			formats(val) {
				let y = new Date(val).getFullYear();
				let m = new Date(val).getMonth() + 1 >= 10 ? new Date(val).getMonth() + 1 : '0' + (new Date(val).getMonth() + 1);
				let d = new Date(val).getDate() >= 10 ? new Date(val).getDate() : '0' + new Date(val).getDate();
				return y + "-" + m + "-" + d;
			},
			//确认保存
			ensureSave() {
				if(this.value1 == '') {
					this.$vux.alert.show({
						title: '提示',
						content: '请输入起始日期'
					});
					return;
				}
				if(this.value2 == '') {
					this.$vux.alert.show({
						title: '提示',
						content: '请输入结束日期'
					});
					return;
				}
				if(this.input1 == '') {
					this.$vux.alert.show({
						title: '提示',
						content: '请输入满多少元'
					});
					return;
				}
				if(this.input2 == '') {
					this.$vux.alert.show({
						title: '提示',
						content: '请输入减多少元'
					});
					return;
				}
				if(this.allData.length > 1) {
					if(this.input3 == '') {
						this.$vux.alert.show({
							title: '提示',
							content: '请输入第二个满多少元'
						});
						return;
					}
					if(this.input4 == '') {
						this.$vux.alert.show({
							title: '提示',
							content: '请输入第二个减多少元'
						});
						return;
					}
					if(this.allData.length > 2) {
						if(this.input5 == '') {
							this.$vux.alert.show({
								title: '提示',
								content: '请输入第三个满多少元'
							});
							return;
						}
						if(this.input6 == '') {
							this.$vux.alert.show({
								title: '提示',
								content: '请输入第三个减多少元'
							});
							return;
						}
						if(this.allData.length > 3) {
							if(this.input7 == '') {
								this.$vux.alert.show({
									title: '提示',
									content: '请输入第四个满多少元'
								});
								return;
							}
							if(this.input8 == '') {
								this.$vux.alert.show({
									title: '提示',
									content: '请输入第四个减多少元'
								});
								return;
							}
							if(this.allData.length > 4) {
								if(this.input7 == '') {
									this.$vux.alert.show({
										title: '提示',
										content: '请输入第五个满多少元'
									});
									return;
								}
								if(this.input8 == '') {
									this.$vux.alert.show({
										title: '提示',
										content: '请输入第五个减多少元'
									});
									return;
								}
							}
						}
					}
				}
				if(!this.flagss) {
					return false;
				}
				let obj = {};
				let arr = [];
				let obj1 = {};
				let obj2 = {};
				let obj3 = {};
				let obj4 = {};
				let obj5 = {};
				obj.start_time = new Date(this.value1.replace(/-/g, '/')).getTime();
				obj.end_time = new Date(this.value2.replace(/-/g, '/')).getTime();
				obj1.door = this.input1;
				obj1.money = this.input2;
				arr.push(obj1);
				if(this.allData.length > 1) {
					obj2.door = this.input3;
					obj2.money = this.input4;
					arr.push(obj2);
					if(this.allData.length > 2) {
						obj3.door = this.input5;
						obj3.money = this.input6;
						arr.push(obj3);
						if(this.allData.length > 3) {
							obj4.door = this.input7;
							obj4.money = this.input8;
							arr.push(obj4);
							if(this.allData.length > 4) {
								obj5.door = this.input9;
								obj5.money = this.input10;
								arr.push(obj5);
							}
						}
					}
				}
				obj.ticket = arr;
				//console.log(obj);return;
				this.$axiosPost('/coupon/index/payback' + this.params,obj).then(res => {
					//console.log(res);
					this.flagss = false;
					if(res.code === 200) {
						this.$vux.toast.show({
							text: '添加成功',
							position: 'middle'
						})
						setTimeout(() => this.$router.push('/actList/0'), 1500);
					}
				})
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.full_reduce {
		background: #f0eff5;
		.content {
			.sel_dates {
				.sel_start_date {
					margin-top: .28rem;
				}
				.sel_end_date {
					margin-bottom: .28rem;
				}
			}
			.full_reduce_act {
				background: #fff;
				.change_data {
					display: flex;
					align-items: center;
					border-bottom: 1px solid #f0f0f0;
					p {
						font-size: .34rem;
						color: #2b2b2b;
					}
					>p {
						border-right: 1px solid #f0f0f0;
						padding: .28rem;
					}
					.modify {
						width: 80%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: .16rem .28rem;
						p {
							display: flex;
							align-items: center;
							input {
								width: .9rem;
								height: .46rem;
								border: 1px solid #eaeaea;
								border-radius: .08rem;
								margin: 0 .38rem 0 .12rem;
								padding: 0 .1rem;
								font-size: .28rem;
							}
						}
						img {
							width: .3rem;
							height: .3rem;
						}
					}
				}
				.add_full {
					font-size: .32rem;
					color: #00b196;
					display: flex;
					justify-content: center;
					padding: .3rem 0;
				}
				.maximum {
					font-size: .28rem;
					color: #ADADAD;
					display: flex;
					justify-content: center;
					padding: .4rem 0;
					background: #f0eff5;
				}
			}
			.agreement {
				display: flex;
				background: #fff;
				padding: .12rem .28rem;
				margin-top: .22rem;
				p {
					display: flex;
					align-items: center;
					font-size: .28rem;
					color: #2e2e2e;
					span {
						color: #02c1af;
					}
				}
			}
		}
		footer {
			width: 90.1%;
			height: .75rem;
			position: fixed;
			bottom: .26rem;
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>